<style include="settings-shared">
  cr-link-row {
    --cr-section-padding: 0;
  }
  /* The same width as in cr-link-row */
  .start-icon {
    width: var(--cr-link-row-icon-width, var(--cr-icon-size));
  }
</style>
<div id="parental-controls-item" class="settings-box two-line">
  <template is="dom-if" if="[[isChild_]]">
    <cr-link-row on-click="handleFamilyLinkButtonClick_"
        start-icon="cr20:kite"
        label="$i18n{parentalControlsPageTitle}"
        sub-label="$i18n{parentalControlsPageViewSettingsLabel}"
        external>
    </cr-link-row>
  </template>
  <template is="dom-if" if="[[!isChild_]]">
    <iron-icon class="start-icon" icon="cr20:kite"></iron-icon>
    <div class="middle settings-box-text">
      <div id="label" aria-hidden="true">
        $i18n{parentalControlsPageTitle}
      </div>
      <div class="secondary" id="sub-label" aria-hidden="true">
        [[getSetupLabelText_(online_)]]
      </div>
    </div>
    <div class="separator"></div>
    <cr-button id="setupButton" on-click="handleSetupButtonClick_"
        disabled$="[[!online_]]" aria-labelledby="label"
        aria-describedby="sub-label"
        aria-roledescription="$i18n{parentalControlsSetUpButtonRole}">
      $i18n{parentalControlsSetUpButtonLabel}
    </cr-button>
  </template>
</div>
